<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<view class=" tn-flex tn-flex-wrap tn-flex-row-between">
				<block v-for="(item,index) in goodsList" :key="index">
					<view class="list" @click="goProduct(item.id)">
						<image :src="item.images[0]" class="goods-img" mode=""></image>
						<view class="name tn-text-ellipsis-2">{{item.goods_name}}</view>
						<view class="price-num">
							<view class="price">
								<text class="p1">￥</text>
								<text class="p1">{{item.price}}</text>
							</view>
							<text class="num">{{item.buy_no}}人购买</text>
						</view>
					</view>
				</block>
			</view>
			<tn-load-more :status="loadStatus"></tn-load-more>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: '',
				page: 1,
				goodsList: [],
				loadStatus: 'nomore',
				searchKey: '',
				show: false
			}
		},
		onLoad(option) {
			this.id = option.id ? option.id : 0
			this.searchKey = option.searchKey ? option.searchKey : ''
			this.getList()
		},
		onReachBottom() {
			this.page++
			this.loadStatus = 'loading'
			this.getList()
		},
		methods: {
			async getList() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/shop/shopList',
						data: {
							id: this.id,
							page: this.page,
							searchKey: this.searchKey,
							xiaolei: 0
						}
					})
					let data = result.data.data.data
					if (this.page == 1) {
						this.goodsList = data
						this.show = true
					} else {
						this.goodsList = this.goodsList.concat(data)
						this.loadStatus = 'nomore'
						if (data.length == 0) {
							this.page--
						}
					}
				} catch (e) {
					this.msg(e.data.msg)
				}

			},
			goProduct(id) {
				uni.navigateTo({
					url: '/shopPages/product?id=' + id
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.list {
			width: 48%;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 24rpx;

			.goods-img {
				width: 100%;
				height: 280rpx;
			}

			.name {
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
				padding: 20rpx 20rpx 0 20rpx;
			}

			.price-num {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;

				.price {
					color: #ed180b;
					font-weight: bold;

					.p1 {
						font-size: 22rpx;
					}

					.p2 {
						font-size: 30rpx;
					}
				}

				.num {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333ad;
				}

			}
		}
	}
</style>
